<!-- 子页面使用的TabBar-->
<template>
	<view class="bottm-box">
		<view class="btn" v-for="(item,index) in list" :key="index" @click="clkJump(item.url)">
			<image :src="item.icon" ></image>
			<!-- <image src="@/static/images/home_bottom11.png"></image> -->
			<view style="font-size: 20rpx;line-height: 30rpx;">{{item.name}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"Jump-home",
		data() {
			return {
				list:[
					{
						id:1,
						name:'首页',
						icon:'/static/images/home_bottom11.png',
						url:'/main/home/index'
					},
					{
						id:2,
						name:'分类',
						icon:'/static/images/home_bottom21.png',
						url:'/main/sort/sort2'
					},
					// {
					// 	id:3,
					// 	name:'分销',
					// 	icon:'/static/images/home_bottom31.png',
					// 	url:'/main/distribution/list'
					// },
					{
						id:3,
						name:'购物车',
						icon:'/static/images/home_bottom41.png',
						url:'/main/car/shopCar'
					},
					{
						id:4,
						name:'我的',
						icon:'/static/images/home_bottom51.png',
						url:'/main/home/Personal_Center'
					}
				]
			};
		},
		methods:{
			clkJump(url){
				uni.switchTab({
					url: url
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bottm-box{
		width: 750rpx;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		z-index: 999;
		background-color: #fff;
		 padding-top: 20rpx;
		box-sizing: border-box;
		.btn{
			width: 20%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			image{
				width: 40rpx;
				height: 40rpx;
				margin-bottom: 10rpx;
				
			}
		}
	}
</style>